<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    {{template  "link/sell/link.html" .}}
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>

<div  >
    <ul class="layui-nav">
        <li class="layui-nav-item"><a href="">店铺:{{.Store.StoresName}}</a></li>
        <li class="layui-nav-item"><a href="/sell/index">店铺主页</a></li>
        <li class="layui-nav-item"><a href="/sell/orderList">订单</a></li>
        <li class="layui-nav-item"><a href="/sell/store/manage">店铺管理</a></li>
        <li class="layui-nav-item layui-this"><a href="/sell/goodManage">商品管理</a></li>
        <li class="layui-nav-item"><a href="/sell/kindManage">种类管理</a></li>
        <li class="layui-nav-item"><a href="/sell/logout">退出</a></li>
    </ul>
</div>

<table class="layui-hide" id="test" lay-filter="test"></table>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="getCheckData" >添加商品</button>
    </div>
</script>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>


<script>
    layui.use(['table', 'laytpl', 'jquery',
    ], function () {
        var table = layui.table;
        var laytpl = layui.laytpl;
        var $ = layui.jquery
        var form = layui.form;
        // laytpl.config({
        //     open: '<%',
        //     close: '%>'
        // });
        table.render({
            elem: '#test'
            , url: '/sell/getGoodList'
            , title: '用户数据表'
            , height: 800
            , toolbar:"#toolbarDemo"
            , cols: [[
                {type: 'checkbox', fixed: 'left'}
                , {field: 'GoodId', title: '编号', width: 80, fixed: 'left', unresize: true, sort: true}
                , {field: 'GoodName', title: '名字', width: 120, edit: 'text'}
                , {field: 'GoodPrices', title: '价格', width: 150, edit: 'text'}
                , {field: 'GoodStorage', title: '存货', width: 80, edit: 'text', sort: true}
                , {field: 'GoodKindId', title: '类型', width: 100,edit :'text'}
                , {field: 'GoodDescription', title: '描述', edit: 'text'}
                , {field: 'GoodUrl', title: '地址', width: 120,edit:'text'}
                , {field: 'GoodCount', title: '销量', width: 100, sort: true}
                , {field: 'GoodRefPrices', title: '参考价', width: 100, sort: true, edit: "text"}
                , {
                    field: 'GoodIsSell', title: '是否上架', width: 100, templet: function (res) {
                        var hh = '<input type="checkbox" name="isSell" lay-skin="switch"  value=' + res.GoodId + ' lay-text="上架|未上架" lay-filter="sexDemo" '
                        if (res.GoodIsSell == 1) {
                            hh = hh + 'checked'
                        }
                        hh = hh + ">"
                        return hh
                    }
                }
                , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150}
            ]]
            , page: true
        });


        //监听行工具事件

        form.on('switch(sexDemo)', function (obj) {
            var data = obj.value
            var value =obj.elem.checked
            switchHot(data,value)
        });

        table.on('tool(test)', function (obj) {
            var data = obj.data;
            //console.log(obj)
            if (obj.event === 'del') {
                layer.confirm('真的删除行么', function (index) {
                    obj.del();
                    delGood(data)
                    layer.close(index);
                });
            }
        });
        
        table.on('toolbar(test)',function () {
            window.location.replace("/sell/addGood");
        })

        table.on('edit(test)', function (obj) {
            var value = obj.value //得到修改后的值
                , data = obj.data //得到所在行所有键值
                , field = obj.field; //得到字段
            editGood(field, value, data.GoodId)
        });

        function switchHot(goodId,value) {
            var data1 = "goodId=" + goodId +"&value="+value
            $.ajax({
                url: "/sell/setGoodSell",
                type: "post",
                data: data1,
                dataType: 'json',
                contentType: "application/x-www-form-urlencoded;charset=UTF-8",
                success: function (res) {
                    if (res.code == 0) {
                        layer.alert(res.msg)
                    } else {
                        layer.alert("操作失败")
                    }
                }
            })
        }

        function delGood(data) {
            var data1 = "goodId=" + data.GoodId
            $.ajax({
                url: "/sell/deleteGood",
                type: "post",
                data: data1,
                dataType: 'json',
                contentType: "application/x-www-form-urlencoded;charset=UTF-8",
                success: function (res) {
                    if (res.code == 0) {
                        layer.alert("删除成功")
                    } else {
                        layer.alert("删除失败")
                    }
                }
            })
        }

        function editGood(field, value, goodId) {
            var data1 = "goodId=" + goodId + "&" + "field=" + field + "&" + "value=" + value
            $.ajax({
                url: "/sell/editGood",
                type: "post",
                data: data1,
                dataType: 'json',
                contentType: "application/x-www-form-urlencoded;charset=UTF-8",
                success: function (res) {
                    if (res.code == 0) {
                        layer.alert("修改成功")
                    } else {
                        layer.alert("修改失败")
                    }
                }
            })
        }

    });
</script>

</body>
</html>